<template>
  <div id="modulesView">
    <div class="header">{{ title }}</div>
    <div id="fillBlank"></div>
    <router-view></router-view>
    <bottom-back></bottom-back>
    <div id="fillBlank"></div>
  </div>
</template>
<script>
import bottomBack from '../modules/bottomBack'
export default {
  data(){
    return {
      title: ''
    }
  },
  components: {
    bottomBack
  },
  beforeRouteEnter(to, from, next){
    next(vm => {
      vm.title = to.name;
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    // console.log(to.name);
    this.title = to.name;
    if(to.path.indexOf('/modules/iframe') > -1){
      this.title = to.params.name;
    }
    next();
  }
}
</script>

<style scoped>
#modulesView{
  background: #fafafa;
}
#fillBlank{
  height: 40px;
}
.header{
  position: fixed;
  height: 40px;
  width: 100%;
  box-sizing: 100%;
  line-height: 40px;
  padding: 0 10px;
  z-index: 1000;
  background: #26a2ff;
  color: #fff;
}
</style>
